import React from 'react';
import { Button, Space, Steps, Card, Typography, Modal } from "antd";
import ServeInfoModal from './serveInfoModal';
import ServeTimeLineModal from "../component/serveTimeLine";
import '../style/style.scss';

export default class OrderStatus extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orderInfo: props.orderInfo,
            isServerInfoModal: false,
            isNegotiateModal: false,
            negotiationHistoryContent: null //数据信息
        }
    }
    async componentDidMount() {
        let orderInfo = this.props.orderInfo
        if (orderInfo.negotiationHistory){
            this.setState({
                negotiationHistoryContent: JSON.parse(orderInfo.negotiationHistory.content)
            })
        }
    }
    // 订单信息查看按钮的显示
    serveInfoBtn = (value) => {
        if (value) {
            if (value.operateType) {
                // 在服务信息operateType返回  MHC_POSITION_PUNCH或者MHC_COMPLETE_SERVICE的时候 查看 图片或视频信息
                if (value.operateType === 'MHC_POSITION_PUNCH' || value.operateType === 'MHC_POSITION_PUNCH') {
                    return <Button Button type='link' onClick={() => { this.setState({ isServerInfoModal: true }) }}>查看</Button>
                }
                // 在服务信息operateType返回  MHC_MEMBER_SUCCESS_CHANGE   MHC_SERVICER_SUCCESS_CHANGE    MHC_REFUND_SUCCESS_ORDER_DETAIL_CLOSE   查看跳转至售后单详情页
                if (value.operateType === 'MHC_MEMBER_SUCCESS_CHANGE' || value.operateType === 'MHC_SERVICER_SUCCESS_CHANGE' || value.operateType === 'MHC_REFUND_SUCCESS_ORDER_DETAIL_CLOSE') {
                    if (value.relationType) {
                        // relationType 0 跳转变更 1 跳转退款
                        let path = ''//跳转详情地址
                        switch (value.relationType) {
                            case '1':
                                path = '/call/order/afterSaleOrder/refundDetails/' + value.dataId
                                break
                            case '0':
                                path = '/call/order/afterSaleOrder/changeDetails/' + value.dataId
                                break
                        }
                        return (path && path !== '') && <Button Button type='link' onClick={() => { this.props.history.push(path) }}>查看</Button>
                    }
                }
            }
        }
    }
    //操作关闭服务信息查看图片视频弹窗
    getModalOpen = (value) => {
        this.setState({ isServerInfoModal: value })
    }
    // 操作关闭服务信息弹窗
    getServeTimeLineModalOpen = (value) => {
        this.setState({ isNegotiateModal: value })
    }
    render() {
        const { orderInfo, negotiationHistoryContent, isServerInfoModal,isNegotiateModal } = this.state;
        console.log(negotiationHistoryContent)
        return (
            <div>
                {
                    negotiationHistoryContent && <Card>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Space direction='vertical' size={10} >
                                <span style={{ fontSize: 18, marginBottom: 10 }}>{negotiationHistoryContent.operateName ?? ''}&nbsp;&nbsp;&nbsp;{negotiationHistoryContent.operateTime ?? ''}</span>
                                <Space>
                                    {negotiationHistoryContent.content && <span style={{ color: '#aaa' }}>{negotiationHistoryContent.content}</span>}
                                    {
                                        this.serveInfoBtn(negotiationHistoryContent)
                                    }
                                </Space>
                            </Space>
                            <Button size='small' onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看详情</Button>
                        </div>
                    </Card>
                }
                {
                    isServerInfoModal && <ServeInfoModal ServeInfoModal isModalOpen={isServerInfoModal} detailsData={negotiationHistoryContent} getModalOpen={this.getModalOpen}></ServeInfoModal>
                }
                {
                    //查看服务信息详情
                    isNegotiateModal && <ServeTimeLineModal history={this.props.history} orderId={orderInfo.orderId} isModalOpen={isNegotiateModal} getModalOpen={this.getServeTimeLineModalOpen}></ServeTimeLineModal>
                }
            </div >
        )
    }
}
